<template>
	<view class="">
		<view class="alertmobile">
			<view class="mobile">
				<span class="alertmobile_title">手机号</span>
				<input type="text" placeholder-class="placeo" placeholder-style="font-size:28upx" @blur="test" v-model="mobile" placeholder="请输入手机号" />
			</view>
			<view class="authcode">
				<span class="alertmobile_title">验证码</span>
				<input type="text" v-model="code" placeholder-class="placeo" placeholder-style="font-size:28upx" placeholder="短信验证码" />
				<view :class="['authcode_item', !flag ? 'noclick' : '']" @click="change">
					<span v-if="flag" class="getcode">获取验证码</span>
					<span v-else>{{ time }}s后重新获取</span>
				</view>
			</view>
		</view>
		<view class="true" @click="edit"><bu-tton>确认修改</bu-tton></view>
		<navigation></navigation>
	</view>
</template>

<script>
import buTton from '../../components/mine/button.vue';
import navigation from '@/components/navigation/navigation.vue';
export default {
	components: { buTton, navigation },
	data() {
		return {
			mobile: '',
			code: '',
			flag: true,
			time: 5
		};
	},
	methods: {
		// 正则验证手机号
		test() {
			if (!/^1[3456789]\d{9}$/.test(this.mobile)) {
				alert('手机号码有误，请输入正确手机号');
				return false;
			}
		},
		edit() {
			if (!/^1[3456789]\d{9}$/.test(this.mobile)) {
				alert('手机号码有误，请输入正确手机号');
				return false;
			}
			this.ajax('user/updateUserPhone', {
				data: {
					code: this.code,
					mobile: this.mobile
				},
				success: res => {
					this.res.code;
				}
			});
		},
		change() {
			clearInterval(timer);
			this.flag = false;
			var timer = setInterval(() => {
				this.time--;
				if (this.time == 0) {
					this.flag = true;
					this.time = 5;
					clearInterval(timer);
				}
			}, 1000);
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background-color: #f2f2f2;
}
.alertmobile {
	width: 100%;
	padding: 0 30upx;
	box-sizing: border-box;
	background-color: #ffffff;
}
.mobile,
.authcode {
	width: 100%;
	height: 100upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.alertmobile_title {
		font-size: 28upx;
		color: #333333;
		width: 160upx;
		line-height: 40upx;
	}
	input {
		flex: 1;
	}
}
.mobile {
	border-bottom: 2upx solid #e1e1e1;
}
.authcode .authcode_item {
	width: 200upx;
	border-left: 2upx solid #e1e1e1;
	height: 34upx;
	span {
		display: block;
		font-size: 28upx;
		color: #999;
		text-align: right;
		line-height: 30upx;
	}
	.getcode {
		color: #8839d2;
	}
}
.noclick {
	pointer-events: none;
}
.true {
	padding: 0 20upx;
	box-sizing: border-box;
	margin-top: 50upx;
	font-size: 32upx;
}
</style>
